<template>
    <div>
        <div style="width: 100%; height: 10px;"></div>
        <span style="font-weight:bold;color:black">成绩预测</span>
        <div style="width: 100%; height: 10px;"></div>
        <v-chart class="chart" :option="option" autoresize />
    </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { RadarChart } from 'echarts/charts';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

import { ref } from "vue";
import VChart from "vue-echarts";

const props = defineProps({
  StuId: String
});

use([
    TitleComponent,
    LegendComponent,
    RadarChart,
    CanvasRenderer,
]);


var course_name = 
[
    "1+X初级认证考试", 
    "1+X中级认证考试", 
    "1+X高级认证考试",
    "前置知识-基于卷积神经网络的人脸识别"
];

var score = [100, 89, 90,60]


const option = ref({
    // title: {
    //     text: '成绩预测图',
    //     textStyle: { color: 'black' }
    // },
    legend: {
        data: ['']
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: course_name[0], max: 100 , color:'black' },
            { name: course_name[1], max: 100 , color:'black' },
            { name: course_name[2], max: 100 , color:'black' },
            { name: course_name[3], max: 100 , color:'black' },
        ]
    },
    series: [
        {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
                {
                    value: [score[0], score[1], score[2],score[3]],
                    name: ''
                },
            ]
        }
    ]
});
</script>

<style scoped>
.chart {
    width: 100%;
    height: 400px;
    /* 设置合适的高度 */
}
</style>